<template>
  <div id="energy-manage">
    <div class="main_con">
      <div class="left_con">
        <px-row :gutter="10" class="energy-echarts">
          <px-col :span="10">
            <px-card>
              <div v-if="activeName === 'HOT_WATER'" class="top-title">总用水量</div>
              <div v-if="activeName === 'NG'" class="top-title">总LNG耗量</div>
              <div v-if="activeName === 'ELECTRICTITY'" class="top-title">总电量</div>
              <div v-if="activeName === 'HOT_STEAM'" class="top-title">总蒸汽耗量</div>
              <div v-if="activeName === 'HOT_WATER'" class="water_con">
                <div class="water_con_item">
                  <div>
                    <div>
                      <px-icon color="#3B82F6"><PictureFilled /></px-icon>
                      <span class="con_title">总耗水量</span>
                    </div>
                    <div>
                      <span class="con_number">{{ waterData.monthWaterFormat || "0" }}</span>
                      <span>t</span>
                    </div>
                  </div>
                  <div>
                    <div>
                      <px-icon color="#3B82F6"><PictureFilled /></px-icon>
                      <span class="con_title">今日用水量</span>
                    </div>
                    <div>
                      <span class="con_number">{{ waterData.dayWaterFormat || "0" }}</span>
                      <span>t</span>
                    </div>
                  </div>
                  <div>
                    <div>
                      <px-icon color="#3B82F6"><PictureFilled /></px-icon>
                      <span class="con_title">今年用水量</span>
                    </div>
                    <div>
                      <span class="con_number">{{ waterData.yearWaterFormat || "0" }}</span>
                      <span>t</span>
                    </div>
                  </div>
                </div>
                <px-row>
                  <px-col :span="12">
                    <div class="water_item">
                      <div class="fl">自来水</div>
                      <px-progress width="80%" :stroke-width="13" :percentage="waterData.tw" color="#F6BD16" stroke-linecap="square">
                        <template #default="{ percentage }">
                          <span class="item_number">{{ percentage }}</span
                          >t
                        </template>
                      </px-progress>
                    </div>
                  </px-col>
                  <px-col :span="12">
                    <div class="water_item">
                      <div class="fl">RW</div>
                      <px-progress width="80%" :stroke-width="13" :percentage="waterData.rw" color="#F6BD16" stroke-linecap="square">
                        <template #default="{ percentage }">
                          <span class="item_number">{{ percentage }}</span
                          >t
                        </template>
                      </px-progress>
                    </div>
                  </px-col>
                  <px-col :span="12">
                    <div class="water_item">
                      <div class="fl">UPW</div>
                      <px-progress width="80%" :stroke-width="13" :percentage="waterData.upw" color="#F6BD16" stroke-linecap="square">
                        <template #default="{ percentage }">
                          <span class="item_number">{{ percentage }}</span
                          >t
                        </template>
                      </px-progress>
                    </div>
                  </px-col>
                  <px-col :span="12">
                    <div class="water_item">
                      <div class="fl">PCW</div>
                      <px-progress width="80%" :stroke-width="13" :percentage="waterData.pcw" color="#F6BD16" stroke-linecap="square">
                        <template #default="{ percentage }">
                          <span class="item_number">{{ percentage }}</span
                          >t
                        </template>
                      </px-progress>
                    </div>
                  </px-col>
                  <px-col :span="12">
                    <div class="water_item">
                      <div class="fl">RO</div>
                      <px-progress width="80%" :stroke-width="13" :percentage="waterData.ro" color="#F6BD16" stroke-linecap="square">
                        <template #default="{ percentage }">
                          <span class="item_number">{{ percentage }}</span
                          >t
                        </template>
                      </px-progress>
                    </div>
                  </px-col>
                  <px-col :span="12">
                    <div class="water_item">
                      <div class="fl">DI</div>
                      <px-progress width="80%" :stroke-width="13" :percentage="waterData.di" color="#F6BD16" stroke-linecap="square">
                        <template #default="{ percentage }">
                          <span class="item_number">{{ percentage }}</span
                          >t
                        </template>
                      </px-progress>
                    </div>
                  </px-col>
                </px-row>
              </div>
              <div v-if="activeName !== 'HOT_WATER'" class="lng_con">
                <div v-if="activeName === 'HOT_STEAM'" class="mt-5">
                  <div>
                    <px-icon color="#3B82F6"><PictureFilled /></px-icon>
                    <span class="con_title">总蒸汽费</span>
                  </div>
                  <div>
                    <span class="con_number">{{ steamTotalData.totalCostFormat || "0" }}</span
                    >万元
                  </div>
                  <div class="item_flex">
                    <div>
                      <div>
                        <px-icon color="#3B82F6"><PictureFilled /></px-icon>
                        <span class="con_item_title">压力</span>
                      </div>
                      <div>
                        <span class="con_number">{{ steamTotalData.pressureFormat || "0" }}</span
                        >kg
                      </div>
                    </div>
                    <div>
                      <div>
                        <px-icon color="#3B82F6"><PictureFilled /></px-icon>
                        <span class="con_item_title">温度</span>
                      </div>
                      <div>
                        <span class="con_number">{{ steamTotalData.temperatureFormat || "0" }}</span
                        >℃
                      </div>
                    </div>
                  </div>
                  <div class="item_flex">
                    <div>
                      环比
                      <span
                        :style="{
                          color: steamTotalData.mom >= 0 ? '#34D399' : '#F87171'
                        }"
                        >{{ steamTotalData.mom || "0" }}</span
                      >
                      <px-icon v-if="steamTotalData.mom >= 0" color="#34D399"><Top /></px-icon>
                      <px-icon v-else color="#F87171"><Bottom /></px-icon>
                    </div>
                    <div>
                      同比
                      <span
                        :style="{
                          color: steamTotalData.yoy >= 0 ? '#34D399' : '#F87171'
                        }"
                        >{{ steamTotalData.yoy || "0" }}</span
                      >
                      <px-icon v-if="steamTotalData.yoy >= 0" color="#34D399"><Top /></px-icon>
                      <px-icon v-else color="#F87171"><Bottom /></px-icon>
                    </div>
                  </div>
                </div>
                <div v-if="activeName === 'NG'" class="mt-5">
                  <div>
                    <px-icon color="#3B82F6"><PictureFilled /></px-icon>
                    <span class="con_title">总LNG费</span>
                  </div>
                  <div>
                    <span class="con_number">{{ lngTotalData.totalCostFormat || "0" }}</span
                    >万元
                  </div>
                  <div class="mt-5">
                    环比
                    <span
                      :style="{
                        color: lngTotalData.mom >= 0 ? '#34D399' : '#F87171'
                      }"
                      >{{ lngTotalData.mom || "0" }}</span
                    >
                    <px-icon v-if="lngTotalData.mom >= 0" color="#34D399"><Top /></px-icon>
                    <px-icon v-else color="#F87171"><Bottom /></px-icon>
                  </div>
                  <div class="mt-5">
                    同比
                    <span
                      :style="{
                        color: lngTotalData.yoy >= 0 ? '#34D399' : '#F87171'
                      }"
                      >{{ lngTotalData.yoy || "0" }}</span
                    >
                    <px-icon v-if="lngTotalData.yoy >= 0" color="#34D399"><Top /></px-icon>
                    <px-icon v-else color="#F87171"><Bottom /></px-icon>
                  </div>
                </div>
                <div id="totalLng" class="totalLng" />
              </div>
            </px-card>
          </px-col>
          <px-col :span="7">
            <px-card class="eqt-top">
              <div class="top-title">本月工序{{ showTitle }}top5</div>
              <div v-if="activeName === 'HOT_WATER'" id="eqtMain" class="eqtMain" />
              <div v-if="activeName !== 'HOT_WATER'" id="eqtMainOther" class="eqtMainOther" />
            </px-card>
          </px-col>
          <px-col :span="7">
            <px-card class="eqt-top">
              <div class="top-title">本月区域{{ showTitle }}top5</div>
              <div v-if="activeName === 'HOT_WATER'" id="areaMain" class="areaMain" />
              <div v-if="activeName !== 'HOT_WATER'" id="areaMainOther" class="areaMainOther" />
            </px-card>
          </px-col>
        </px-row>
        <px-row>
          <px-col :span="24">
            <px-card class="eqt-top">
              <monotorTable :table-data="tableData" :table-header="tableHeader" :loading="loading" />
            </px-card>
          </px-col>
        </px-row>
      </div>
      <div v-if="activeName === 'HOT_WATER'" class="right_con">
        <px-card class="eqt-top">
          <div class="top-title">本月总水费</div>
          <div id="waterCost" class="waterCost" />
          <div class="text_yoy">
            同比&nbsp;
            <span
              :style="{
                color: totalWaterCostData.yoy >= 0 ? '#34D399' : '#F87171'
              }"
            >
              {{ totalWaterCostData.yoy }}
            </span>
            <px-icon v-if="totalWaterCostData.yoy >= 0" color="#34D399"><Top /></px-icon>
            <px-icon v-else color="#F87171"><Bottom /></px-icon>
          </div>
        </px-card>
        <px-card class="eqt-top">
          <div class="top-title">本月总回收水量</div>
          <div id="waterRecycled" class="waterRecycled" />
          <div class="text_yoy">
            同比&nbsp;
            <span
              :style="{
                color: totalWaterRecycleData.yoy >= 0 ? '#34D399' : '#F87171'
              }"
            >
              {{ totalWaterRecycleData.yoy }}
            </span>
            <px-icon v-if="totalWaterRecycleData.yoy >= 0" color="#34D399"><Top /></px-icon>
            <px-icon v-else color="#F87171"><Bottom /></px-icon>
          </div>
        </px-card>
        <px-card class="eqt-top">
          <div class="top-title">本月总排水量</div>
          <div id="waterOut" class="waterOut" />
          <div class="text_yoy">
            同比&nbsp;
            <span
              :style="{
                color: totalWaterOutData.yoy >= 0 ? '#34D399' : '#F87171'
              }"
            >
              {{ totalWaterOutData.yoy }}
            </span>
            <px-icon v-if="totalWaterOutData.yoy >= 0" color="#34D399"><Top /></px-icon>
            <px-icon v-else color="#F87171"><Bottom /></px-icon>
          </div>
        </px-card>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, nextTick, computed, onUnmounted } from "vue";
import * as echarts from "echarts";
import monotorTable from "./components/monotorTable.vue";
import { useRouterStoreHook } from "@/store/modules/router";
import { useEventListener } from "@vueuse/core";
import * as energyModel from "@/api/modules/energy";
import { emitter } from "@/utils/mitt";

const activeName = ref("ELECTRICTITY"); // 默认电
emitter.on("viceMenuChange", val => {
  activeName.value = val;
  eqtResult();
  areaResult();
  if (val === "HOT_STEAM") {
    rankTotal(); // 总排名
    getSteamTotal();
  } else if (val === "NG") {
    rankTotal(); // 总排名
    getLNGTotal();
  } else if (val === "HOT_WATER") {
    getTotalWater(); // 总用水量
    getTotalWaterCost(); // 本月总水费用
    getTotalRecycled(); // 本月总回收水量
    getTotalWaterOut(); // 本月总排水量
  } else {
    rankTotal(); // 总排名
  }
});
onMounted(() => {
  nextTick(() => {
    areaResult();
    eqtResult();
  });
  console.log(activeName.value);
});
onUnmounted(() => {
  emitter.off("viceMenuChange");
});
const tableHeaderEnergy = {
  firstLevelName: {
    label: "使用部门",
    prop: "firstLevelName",
    width: "180"
  },
  secondLevelName: {
    label: "二级系统",
    prop: "secondLevelName",
    width: ""
  },
  thirdLevelName: {
    label: "三级系统",
    prop: "thirdLevelName",
    width: ""
  },
  consumeLoadFormat: {
    label: "负荷(KW)",
    prop: "consumeLoadFormat",
    width: ""
  },
  consumeAmountFormat: {
    label: "用电量(KWH)",
    prop: "consumeAmountFormat",
    width: ""
  },
  totalAmountFormat: {
    label: "总电量(T/月)",
    prop: "totalAmountFormat",
    width: ""
  },
  totalCostFormat: {
    label: "总电费(元)",
    prop: "totalCostFormat",
    width: ""
  }
};
const tableHeaderWater = {
  firstLevelName: {
    label: "一级系统",
    prop: "firstLevelName",
    width: "180"
  },
  secondLevelName: {
    label: "二级系统",
    prop: "secondLevelName",
    width: ""
  },
  thirdLevelName: {
    label: "三级系统",
    prop: "thirdLevelName",
    width: ""
  },
  energySubtype: {
    label: "用水类型",
    prop: "energySubtype",
    width: ""
  },
  consumeAmountFormat: {
    label: "用水量（t）",
    prop: "consumeAmountFormat",
    width: ""
  },
  totalAmountFormat: {
    label: "总耗水量（t/M）",
    prop: "totalAmountFormat",
    width: ""
  },
  totalCostFormat: {
    label: "总水费（RMB）",
    prop: "totalCostFormat",
    width: ""
  }
};
const tableHeaderLNG = {
  firstLevelName: {
    label: "LNG系统",
    prop: "firstLevelName",
    width: "180"
  },
  secondLevelName: {
    label: "二级系统",
    prop: "secondLevelName",
    width: ""
  },
  thirdLevelName: {
    label: "三级系统",
    prop: "thirdLevelName",
    width: ""
  },
  consumeLoadFormat: {
    label: "额定热输入（KW/h）",
    prop: "consumeLoadFormat",
    width: ""
  },
  consumeAmountFormat: {
    label: "LNG耗量（t）",
    prop: "consumeAmountFormat",
    width: ""
  },
  totalAmountFormat: {
    label: "总LNG耗量（t/M）",
    prop: "totalAmountFormat",
    width: ""
  },
  totalCostFormat: {
    label: "总LNG费用（RMB）",
    prop: "totalCostFormat",
    width: ""
  }
};
const tableHeaderSteam = {
  firstLevelName: {
    label: "蒸汽系统",
    prop: "firstLevelName",
    width: "180"
  },
  secondLevelName: {
    label: "二级系统",
    prop: "secondLevelName",
    width: ""
  },
  thirdLevelName: {
    label: "三级系统",
    prop: "thirdLevelName",
    width: ""
  },
  consumeLoadFormat: {
    label: "热负荷（KW）",
    prop: "consumeLoadFormat",
    width: ""
  },
  consumeAmountFormat: {
    label: "蒸汽耗量（t）",
    prop: "consumeAmountFormat",
    width: ""
  },
  totalAmountFormat: {
    label: "总LNG耗量（t/M）",
    prop: "totalAmountFormat",
    width: ""
  },
  totalCostFormat: {
    label: "总LNG费用（RMB）",
    prop: "totalCostFormat",
    width: ""
  }
};
const routerStore = useRouterStoreHook();
const tableHeader: any = computed(() => {
  return activeName.value === "ELECTRICTITY"
    ? tableHeaderEnergy
    : activeName.value === "HOT_WATER"
      ? tableHeaderWater
      : activeName.value === "NG"
        ? tableHeaderLNG
        : tableHeaderSteam;
});
const showTitle = computed(() => {
  return activeName.value === "HOT_WATER" ? "用水" : activeName.value === "HOT_STEAM" ? "蒸汽" : activeName.value === "NG" ? "LNG" : "用电";
});
const showUnit = computed(() => {
  return activeName.value === "HOT_WATER" ? "T" : activeName.value === "HOT_STEAM" ? "GJ" : activeName.value === "NG" ? "M³" : "KWH";
});
// 总排名
const totalRankData = ref([]);
const rankTotal = async () => {
  const param = {
    className: routerStore.subject === "ALL" ? "" : routerStore.subject,
    energyType: activeName.value
  };
  const data: any = await energyModel.eqttablelListAll(param);
  console.log("总排名", data);
  totalRankData.value = data.equipmentRankingList;
  console.log("总排名", totalRankData.value);
  totalRankChart(totalRankData.value, data.total);
};
const totalRankChart = (chartData, total) => {
  type EChartsOption = echarts.EChartsOption;
  const chartDom = document.getElementById("totalLng")!; // LNG总排名
  const myChart = echarts.init(chartDom);
  let option: EChartsOption;
  option = {
    // color: ["#F6BD16", "#5B8FF9", "#34D399", "#EB7272"],
    tooltip: {
      trigger: "item"
    },
    series: [
      {
        type: "pie",
        radius: ["50%", "70%"],
        label: {
          alignTo: "edge",
          formatter: "{name|{b}}\n{num|{c}t}{percent| ( {d}% )}",
          minMargin: 2,
          edgeDistance: 10,
          lineHeight: 20,
          rich: {
            num: {
              fontSize: 14,
              color: "#222",
              lineHeight: 20,
              fontWeight: 600
            },
            percent: {
              fontSize: 10,
              color: "#333",
              lineHeight: 20
            }
          }
        },
        data: chartData.map((item: any) => {
          return {
            value: item.consume_amount,
            name: item.eqp_1st_category_name
          };
        })
      }
    ],
    graphic: {
      type: "text",
      left: "center",
      top: "45%",
      style: {
        text: `${total}吨`,
        textAlign: "center",
        fill: "#3B82F6",
        width: 30,
        height: 30,
        fontSize: 20
      }
    }
  };
  option && myChart.setOption(option);
};
// 本月总水费用
const totalWaterCostData: any = ref({});
const getTotalWaterCost = async () => {
  const param = {
    className: routerStore.subject === "ALL" ? "" : routerStore.subject,
    energyType: activeName.value
  };
  const data: any = await energyModel.waterTotalCost(param);
  console.log("本月总水费用", data);
  totalWaterCostData.value = data;
  totalWaterCostChart(data.costDetailDTO);
};
const totalWaterCostChart = chartData => {
  type EChartsOption = echarts.EChartsOption;
  const chartDom = document.getElementById("waterCost")!; // 本月总水费
  const myChart = echarts.init(chartDom);
  let option: EChartsOption;
  option = {
    // color: ["#F6BD16", "#5B8FF9", "#34D399", "#EB7272"],
    tooltip: {
      trigger: "item",
      formatter: "{b}:{d}% {c}万",
      confine: true
    },
    series: [
      {
        type: "pie",
        radius: ["50%", "70%"],
        label: {
          alignTo: "edge",
          formatter: "{name|{b}}{percent| ( {d}% )}\n{num|{c}万}",
          minMargin: 2,
          edgeDistance: 10,
          lineHeight: 20,
          rich: {
            num: {
              fontSize: 14,
              fontWeight: "bold",
              lineHeight: 20
            },
            name: {
              fontSize: 12
            },
            percent: {
              fontSize: 12
            }
          }
        },
        data: chartData.map((item: any) => {
          return {
            value: item.cost,
            name: item.name
          };
        })
      }
    ]
  };
  option && myChart.setOption(option);
};
// 总用水量
const waterData: any = ref({});
const getTotalWater = async () => {
  const params = {
    className: routerStore.subject === "ALL" ? "" : routerStore.subject
  };
  const data: any = await energyModel.waterTotal(params);
  waterData.value = data;
  console.log("总用水量", data);
};
// 本月总回收水量
const totalWaterRecycleData: any = ref({});
const getTotalRecycled = async () => {
  const params = {
    className: routerStore.subject === "ALL" ? "" : routerStore.subject
  };
  const data: any = await energyModel.waterTotalRecycled(params);
  console.log("本月总回收水量", data);
  totalWaterRecycleData.value = data;
  totalWaterRecycleChart(data);
};
const totalWaterRecycleChart = chartData => {
  type EChartsOption = echarts.EChartsOption;
  const chartDom = document.getElementById("waterRecycled")!; // 本月总回收水量
  const myChart = echarts.init(chartDom);
  let option: EChartsOption;
  option = {
    series: [
      {
        type: "gauge",
        startAngle: 180,
        endAngle: 0,
        center: ["50%", "75%"],
        radius: "120%",
        min: 0,
        max: 1000,
        splitNumber: 4,
        axisLine: {
          lineStyle: {
            width: 12,
            color: [
              [0.25, "#FF6E76"],
              [0.5, "#FDDD60"],
              [0.75, "#58D9F9"],
              [1, "#7CFFB2"]
            ]
          }
        },
        pointer: {
          icon: "path://M12.8,0.7l12,40.1H0.7L12.8,0.7z",
          length: "12%",
          width: 10,
          offsetCenter: [0, "-35%"],
          itemStyle: {
            color: "auto"
          }
        },
        axisTick: {
          length: 5,
          lineStyle: {
            color: "auto",
            width: 1
          }
        },
        splitLine: {
          length: 8,
          lineStyle: {
            color: "auto",
            width: 2
          }
        },
        detail: {
          fontSize: 14,
          offsetCenter: [0, "-5%"],
          valueAnimation: true,
          formatter: function (value) {
            return value + "m³";
          },
          color: "#3B82F6"
        },
        data: [
          {
            value: chartData.recycledWater
          }
        ]
      }
    ]
  };
  option && myChart.setOption(option);
};
// 本月总排水量
const totalWaterOutData: any = ref({});
const getTotalWaterOut = async () => {
  const params = {
    className: routerStore.subject === "ALL" ? "" : routerStore.subject
  };
  const data: any = await energyModel.waterTotalOut(params);
  console.log("本月总排水量", data);
  totalWaterOutData.value = data;
  totalWaterOutChart(data);
};
const totalWaterOutChart = chartData => {
  type EChartsOption = echarts.EChartsOption;
  const chartDom = document.getElementById("waterOut")!; // 本月总水费
  const myChart = echarts.init(chartDom);
  let option: EChartsOption;
  option = {
    tooltip: {
      formatter: "{a}: {c}m³"
    },
    series: [
      {
        name: "总排水量",
        radius: "100%",
        center: ["50%", "55%"],
        axisLabel: {
          textStyle: {
            fontSize: 8 //改变仪表盘内刻度数字的大小
          },
          distance: 15
        },
        axisLine: {
          show: true, //是否显示仪表盘轴线
          roundCap: true, //是否在两端显示成圆形
          lineStyle: {
            width: 10 //轴线宽度
          }
        },
        progress: {
          show: true, //是否显示进度条
          roundCap: true, //是否在两端显示成圆形
          width: 12, //进度条宽度
          itemStyle: {
            color: {
              type: "linear",
              x: 1,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#3F85F7" // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#84B2FF" // 100% 处的颜色
                }
              ],
              global: false // 缺省为 false
            }
          }
        },
        pointer: {
          show: true, //是否显示指针
          itemStyle: {
            color: {
              type: "linear",
              x: 1,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#3F85F7" // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#84B2FF" // 100% 处的颜色
                }
              ],
              global: false // 缺省为 false
            }
          }
        },
        type: "gauge",
        detail: {
          valueAnimation: true,
          fontSize: 14,
          formatter: "{value}m³"
        },
        data: [
          {
            value: chartData.drainage
          }
        ]
      }
    ]
  };
  option && myChart.setOption(option);
};
// 总LNG量
const lngTotalData: any = ref({});
const getLNGTotal = async () => {
  const params = {
    className: routerStore.subject === "ALL" ? "" : routerStore.subject
  };
  const data: any = await energyModel.lngConsumTotal(params);
  console.log("总LNG量", data);
  lngTotalData.value = data;
};
// 总蒸汽耗量
const steamTotalData: any = ref({});
const getSteamTotal = async () => {
  const params = {
    className: routerStore.subject === "ALL" ? "" : routerStore.subject
  };
  const data: any = await energyModel.steamConsumTotal(params);
  console.log("总蒸汽耗量", data);
  steamTotalData.value = data;
};
// 反转数组
const reverseArray = (arr: any) => {
  let newArr = [];
  arr.forEach((item: any) => {
    newArr.unshift(item);
  });
  return newArr;
};
const rgnData = ref([]);
// 区域排名柱状图
const areaResult = async () => {
  const param = {
    className: routerStore.subject === "ALL" ? "" : routerStore.subject,
    energyType: activeName.value
  };
  const data: any = await energyModel.areatablelList(param);
  rgnData.value = data.slice(0, 6);
  let yAxisData = [];
  let seriesData = [];
  yAxisData = reverseArray(data.map(item => item.eqp_1st_area_name));
  seriesData = reverseArray(data.map(item => item.consume_amount));
  areaChart(yAxisData, seriesData);
};
const areaChart = (yAxisData, seriesData) => {
  type EChartsOption = echarts.EChartsOption;
  let chartDom = document.getElementById("areaMain")!;
  let chartDomOther = document.getElementById("areaMainOther")!;
  let showChartDom = activeName.value === "HOT_WATER" ? chartDom : chartDomOther;
  let myChart = echarts.init(showChartDom);
  let option: EChartsOption;

  option = {
    tooltip: {
      trigger: "axis",
      confine: true
    },
    title: {
      // subtext: '单位：万'
    },
    xAxis: {
      type: "value",
      axisLabel: {
        fontSize: 10,
        color: "#010101",
        // rotate: 30,
        margin: 10
      }
    },
    yAxis: {
      type: "category",
      axisLabel: {
        color: "#010101"
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      data: yAxisData
    },
    color: ["#34D399"],
    grid: {
      left: "0px",
      top: "10px",
      right: "20px",
      bottom: "0px",
      containLabel: true
    },
    series: [
      {
        data: seriesData,
        type: "bar",
        itemStyle: {
          normal: {
            label: {
              show: true,
              position: "right",
              formatter: "{num|{c}} t",
              rich: {
                num: {
                  fontSize: 14,
                  color: "#34D399"
                }
              }
            }
          }
        }
      }
    ]
  };

  option && myChart.setOption(option);
  myChart.on("click", params => {
    arearowClick(rgnData.value[params.dataIndex]);
  });
  useEventListener("resize", function () {
    myChart.resize();
  });
};
//默认展示设备排名第一条数据的列表
const eqtData = ref([]);
const eqtResult = async () => {
  const param = {
    className: routerStore.subject === "ALL" ? "" : routerStore.subject,
    energyType: activeName.value
  };
  const data: any = await energyModel.eqttablelList(param);
  eqtData.value = data.slice(0, 6);
  let yAxisData = [];
  let seriesData = [];
  yAxisData = reverseArray(data.map(item => item.eqp_1st_category_name));
  seriesData = reverseArray(data.map(item => item.consume_amount));
  eqtChart(yAxisData, seriesData);
  const rowData = { ...data[0] };
  nextTick(() => {
    eqtrowClick(rowData);
    // echartsEvent(eqtData.value); // 电-饼图展示
  });
};
const eqtChart = (yAxisData, seriesData) => {
  type EChartsOption = echarts.EChartsOption;
  let chartDom = document.getElementById("eqtMain")!;
  let chartDomOther = document.getElementById("eqtMainOther")!;
  let showChartDom = activeName.value === "HOT_WATER" ? chartDom : chartDomOther;
  let myChart = echarts.init(showChartDom);
  let option: EChartsOption;

  option = {
    tooltip: {
      trigger: "axis",
      confine: true
    },
    title: {
      // subtext: '单位：万'
    },
    xAxis: {
      type: "value",
      axisLabel: {
        fontSize: 10,
        color: "#010101",
        // rotate: 30,
        margin: 10
      }
    },
    yAxis: {
      type: "category",
      axisLabel: {
        color: "#010101"
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      data: yAxisData
    },
    color: ["#5B8FF9"],
    grid: {
      left: "0px",
      top: "10px",
      right: "20px",
      bottom: "0px",
      containLabel: true
    },
    series: [
      {
        data: seriesData,
        type: "bar",
        itemStyle: {
          normal: {
            label: {
              show: true,
              position: "right",
              formatter: "{num|{c}} t",
              rich: {
                num: {
                  fontSize: 14,
                  color: "#3B82F6"
                }
              }
            }
          }
        }
      }
    ]
  };

  option && myChart.setOption(option);
  myChart.on("click", params => {
    eqtrowClick(eqtData.value[params.dataIndex]);
  });
  useEventListener("resize", function () {
    myChart.resize();
  });
};
const echartsEvent = pieData => {
  type EChartsOption = echarts.EChartsOption;
  let chartDom = document.getElementById("elmain")!;
  let myChart = echarts.init(chartDom);
  let option: EChartsOption;
  option = {
    tooltip: {
      trigger: "item"
    },
    // color: ["#F6BD16", "#E8684A", "#5B8FF9", "#5AD8A6", "#5D7092"],
    legend: {
      type: "scroll",
      orient: "vertical",
      top: "top",
      left: "left",
      itemGap: 40,
      itemWidth: 10,
      itemHeight: 10
      // formatter: function () {
      //   return (
      //     "{b}"
      //   );
      // }
    },
    series: [
      {
        name: "",
        type: "pie",
        radius: "55%",
        center: ["55%", "50%"],
        avoidLabelOverlap: false,
        label: {
          show: true,
          formatter: "{b}\n{c}"
        },
        labelLine: {
          show: true
        },
        data: pieData.map(item => {
          return {
            value: item.consume_amount,
            name: item.eqp_1st_category_name || item.eqp_1st_area_name
          };
        }),
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)"
          }
        }
      }
    ]
  };
  // myChart.clear()
  option && myChart.setOption(option);
  useEventListener("resize", function () {
    myChart.resize();
  });
};
// 区域点击查询列表
const tableIdx = ref();
const twoData = ref([]);
const tableData = ref([]);
const loading = ref(false);
const arearowClick = async (val: any) => {
  loading.value = true;
  const params = {
    className: routerStore.subject === "ALL" ? "" : routerStore.subject,
    energyType: activeName.value,
    eqp1stArea: val.eqp_1st_area,
    eqp1stAreaName: val.eqp_1st_area_name
  };
  tableData.value = [];
  let data: any = [];
  if (activeName.value === "HOT_WATER") {
    data = await energyModel.areaWatertablelData(params);
  } else {
    data = await energyModel.areatablelData(params);
  }
  twoData.value = data.secondLevel;
  twoLength.value = data.secondLevel.length;
  const dataArr = [];
  twoData.value.map(item => {
    item.firstLevelName = data.firstLevelName;
    item.thirdLevel.map(item1 => {
      item1.secondLevelName = item.secondLevelName; // 二级名称
      item1.firstLevelName = data.firstLevelName; // 一级名称
      item1.totalAmountFormat = item.totalAmountFormat; // 二级总用量
      item1.totalCostFormat = item.totalCostFormat; // 二级总费用
      dataArr.push(item1);
    });
  });
  tableData.value = dataArr || [];
  tableIdx.value = dataArr.length;
  loading.value = false;
};

// 设备点击查询列表
const twoLength = ref();
const eqtrowClick = async (val: any) => {
  loading.value = true;
  const params = {
    className: routerStore.subject === "ALL" ? "" : routerStore.subject,
    eqp1stCategory: val.eqp_1st_category,
    eqp1stCategoryName: val.eqp_1st_category_name,
    energyType: activeName.value
  };
  tableData.value = [];
  let data: any = [];
  if (activeName.value === "HOT_WATER") {
    data = await energyModel.eqtWatertablelData(params);
  } else {
    data = await energyModel.eqttablelData(params);
  }
  twoData.value = data.secondLevel;
  twoLength.value = data.secondLevel.length;
  const dataArr = [];
  twoData.value.map(item => {
    item.firstLevelName = data.firstLevelName;
    item.thirdLevel.map(item1 => {
      item1.secondLevelName = item.secondLevelName; // 二级名称
      item1.firstLevelName = data.firstLevelName; // 一级名称
      item1.totalAmountFormat = item.totalAmountFormat; // 二级总用量
      item1.totalCostFormat = item.totalCostFormat; // 二级总费用
      dataArr.push(item1);
    });
  });
  tableData.value = dataArr || [];
  tableIdx.value = dataArr.length;
  loading.value = false;
};
</script>
<style scoped lang="scss">
#energy-manage {
  .main_con {
    display: flex;

    .left_con {
      flex-grow: 1;
      width: auto;
      min-width: 1150px;
    }

    .right_con {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 20%;
      min-width: 320px;
      margin-left: 16px;

      .eqt-top {
        .waterCost {
          height: 200px;
        }

        .waterOut {
          height: 200px;
        }

        .waterRecycled {
          height: 200px;
        }

        .text_yoy {
          height: 20px;
          font-size: 14px;
          line-height: 20px;
          text-align: center;

          .text_yoy {
            margin-top: 3px;
          }
        }
      }
    }

    .top_tabs {
      margin-bottom: 20px;
    }

    .top-title {
      height: 32px;
      padding-left: 9px;
      font-size: 18px;
      font-weight: bold;
      line-height: 32px;
      color: #000;
      background-image: linear-gradient(to right, rgb(59 130 246 / 24%), rgb(59 130 246 / 0%));
      border-left: 4px solid #3b82f6;
    }

    .energy-echarts {
      flex-wrap: nowrap;
      margin-bottom: 20px;

      .con_title {
        margin-left: 5px;
        font-size: 16px;
        font-weight: 600;
      }

      .con_item_title {
        margin-left: 5px;
        font-size: 14px;
        font-weight: 600;
      }

      .con_number {
        margin-right: 5px;
        font-size: 20px;
        font-weight: 600;
        color: #3b82f6;
      }

      .item_flex {
        display: flex;
        justify-content: space-between;
        margin: 20px 0;
      }

      .left-echarts {
        height: 252px;
        background-color: #fff;
        border-radius: 8px;
      }

      .item_number {
        margin-right: 5px;
        font-size: 16px;
        color: #3b82f6;
      }

      .water_con {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 220px;

        .water_con_item {
          display: flex;
          justify-content: space-between;
          margin: 16px 0 0;
        }

        .water_item {
          margin-bottom: 16px;

          .fl {
            width: 22%;
            font-size: 14px;
          }

          .fl::after {
            display: block;
            height: 0;
            clear: both;
            line-height: 0;
            visibility: hidden;
            content: "";
          }
        }
      }

      .steam_con {
        display: flex;
        justify-content: space-between;
        height: 220px;

        .totalSteam {
          height: 220px;
        }
      }

      .lng_con {
        display: flex;
        justify-content: space-between;
        height: 220px;

        .totalLng {
          width: 70%;
          height: 220px;
        }
      }

      .eqt-top {
        background-color: #fff;
        border-radius: 8px;

        .areaMain {
          height: 220px;
        }

        .areaMainOther {
          height: 220px;
        }

        .eqtMain {
          height: 220px;
        }

        .eqtMainOther {
          height: 220px;
        }

        .top-title {
          cursor: pointer;
        }
      }
    }

    .energy-detail {
      width: 100%;
      height: 400px;
      padding: 24px;
      background-color: #fff;
      border-radius: 8px;
      // margin-bottom: 24px;
      // overflow: scroll;
    }

    :deep(.px-progress-bar__outer) {
      border-radius: 0;
    }

    :deep(.px-progress-bar__inner) {
      border-radius: 0;
    }
  }
}
</style>
